import React, { Component } from 'react';
import { Table, Input, Button, Space, Divider, Badge } from 'antd';
import Highlighter from 'react-highlight-words';
// 这个axios包用于向数据库调取数据
import axios from 'axios';
import { SearchOutlined } from '@ant-design/icons';

// 这个是登录账号，可以直接从页面获取，暂时写在这里
const login_id = 1;

// 定义类组件DeliveryList
export default class DeliveryList extends Component {
	// 定义它的state，前两个用于查询，data中存储其中的数据
	state = {
		searchText: '',
		searchedColumn: '',
		data: null
	};
	// 组件生命周期，这个在渲染后调用
	componentDidMount() {
		// 向数据库要数据，后续改成getAllDelivery
		axios.get('http://friday.nat100.top/getAllOrder').then((response) => this.setState({ data: response.data }));
	}
	// 用于判断状态的函数，帮助生成badge
	judgeStatus = (status) => {
		switch (status) {
			case '已完成':
				return 'success';
			case '待发送':
				return 'error';
			case '待发货':
				return 'processing';
			case '待付款':
				return 'warning';
			default:
				return 'default';
		}
	};
	// 下面这些是table头产生的搜索框用到的函数
	getColumnSearchProps = (dataIndex) => ({
		filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
			<div style={{ padding: 8 }}>
				<Input
					ref={(node) => {
						this.searchInput = node;
					}}
					placeholder={`Search ${dataIndex}`}
					value={selectedKeys[0]}
					onChange={(e) => setSelectedKeys(e.target.value ? [ e.target.value ] : [])}
					onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
					style={{ marginBottom: 8, display: 'block' }}
				/>
				<Space>
					<Button
						type="primary"
						onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
						icon={<SearchOutlined />}
						size="small"
						style={{ width: 90 }}
					>
						搜索
					</Button>
					<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
						重置
					</Button>
					<Button
						type="link"
						size="small"
						onClick={() => {
							confirm({ closeDropdown: false });
							this.setState({
								searchText: selectedKeys[0],
								searchedColumn: dataIndex
							});
						}}
					>
						Filter
					</Button>
				</Space>
			</div>
		),
		filterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
		onFilter: (value, record) =>
			record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
		onFilterDropdownVisibleChange: (visible) => {
			if (visible) {
				setTimeout(() => this.searchInput.select(), 100);
			}
		},
		render: (text) =>
			this.state.searchedColumn === dataIndex ? (
				<Highlighter
					highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
					searchWords={[ this.state.searchText ]}
					autoEscape
					textToHighlight={text ? text.toString() : ''}
				/>
			) : (
				text
			)
	});

	handleSearch = (selectedKeys, confirm, dataIndex) => {
		confirm();
		this.setState({
			searchText: selectedKeys[0],
			searchedColumn: dataIndex
		});
	};

	handleReset = (clearFilters) => {
		clearFilters();
		this.setState({ searchText: '' });
	};
	// table头用到的函数到这里
	// 渲染deliveryList
	render() {
		// 从父组件中拿到操作tab的函数handleclick，用于在点击编辑详情时添加tab
		// 函数内容在management的add中
		const { handleClick } = this.props;
		// 定义table的列，不要搜索框就不要...this.getColumnSearchProps('id')
		const columns = [
			{
				title: '订单编号',
				dataIndex: 'id',
				align: 'center',
				...this.getColumnSearchProps('id')
			},
			{
				title: '公司',
				dataIndex: 'company_name',
				align: 'center',
				...this.getColumnSearchProps('company_name')
			},
			{
				title: '总价',
				dataIndex: 'total_price',
				align: 'center',
				...this.getColumnSearchProps('total_price')
			},
			{
				title: '下单时间',
				dataIndex: 'order_date',
				align: 'center',
				...this.getColumnSearchProps('order_date')
			},
			{
				title: '预计送达时间',
				dataIndex: 'req_deliv_date',
				key: 'valid_from',
				align: 'center',
				...this.getColumnSearchProps('req_deliv_date')
			},
			{
				title: '状态',
				dataIndex: 'status',
				align: 'center',
				filters: [
					{ text: '待发送', value: '待发送' },
					{ text: '待发货', value: '待发货' },
					{ text: '待收货', value: '待收货' },
					{ text: '待付款', value: '待付款' },
					{ text: '已完成', value: '已完成' }
				],
				render: (status) => {
					{
						return <Badge status={this.judgeStatus(status)} text={status} />;
					}
				},
				onFilter: (value, record) => record.status.indexOf(value) === 0
			},
			{
				title: '',
				key: 'action',
				align: 'center',
				render: (record) => (
					<Space>
						<Button
							type="link"
							size="small"
							/* 点击时操作tab  */
							onClick={() => {
								handleClick(record);
							}}
						>
							详情
						</Button>
					</Space>
				)
			}
		];
		// pageSize用于分页
		return <Table className="table" columns={columns} dataSource={this.state.data} pagination={{ pageSize: 4 }} />;
	}
}
